<template>
  <div class="custom-form">
    <!-- 单选 -->
    <field-select v-if="tableField.variableType === '10' && tableField.fieldVariableValue.codeArrangement === 3"
      :table-field="tableField" :table-status="tableStatus" :birthmark="birthmark" :embedded-table="embeddedTable"
      v-model="localValue" />
    <field-radio v-if="tableField.variableType === '10' && tableField.fieldVariableValue.codeArrangement !== 3"
      :table-field="tableField" :table-status="tableStatus" :birthmark="birthmark" :embedded-table="embeddedTable"
      v-model="localValue" />
    <!-- 多选 -->
    <field-checkbox v-if="tableField.variableType === '20'" :table-field="tableField" :table-status="tableStatus"
      :birthmark="birthmark" :embedded-table="embeddedTable" v-model="localValue" />
    <!-- 日期/日期时间-->
    <field-date v-if="tableField.variableType === '30'||tableField.variableType === '50'" :table-field="tableField" :table-status="tableStatus"
      :birthmark="birthmark" :embedded-table="embeddedTable" v-model="localValue" />
    <!-- 时间 -->
    <field-time v-if="tableField.variableType === '40'" :table-field="tableField" :table-status="tableStatus"
      :birthmark="birthmark" :embedded-table="embeddedTable" v-model="localValue" />
    <!-- 字符 -->
    <field-input v-if="tableField.variableType === '70'||tableField.variableType === '80'" :table-field="tableField" :table-status="tableStatus"
      :birthmark="birthmark" :embedded-table="embeddedTable" :tableFieldList="tableFieldList" v-model="localValue" />
    <!-- 数值 -->
    <field-number v-if="tableField.variableType === '60'" :table-field="tableField" :table-status="tableStatus"
      :birthmark="birthmark" :embedded-table="embeddedTable" v-model="localValue" />

    <!-- 字符日期 -->
    <field-partial-date v-if="tableField.variableType === '90'" :table-field="tableField" :table-status="tableStatus"
      :birthmark="birthmark" :embedded-table="embeddedTable" v-model="localValue" />
    <!-- 字符时间 -->
    <field-partial-time   v-if="tableField.variableType === '100'" :table-field="tableField" :table-status="tableStatus"
      :birthmark="birthmark" :embedded-table="embeddedTable" v-model="localValue" />

    <!-- 长字符 -->
    <field-textarea v-if="tableField.variableType === '110'" :table-field="tableField" :table-status="tableStatus"
      :birthmark="birthmark" :embedded-table="embeddedTable" v-model="localValue" />
    <!-- 图片上传 -->
    <field-upload  v-if="tableField.variableType === '120'" :table-field="tableField" :table-status="tableStatus"
      v-model="localValue" />
    <div v-if="tableField.variableType === '200'">{{ localValue }}</div>
  </div>
</template>

<script>
import fieldSelect from "./fields/select.vue";
import fieldRadio from "./fields/radio.vue";
import fieldCheckbox from "./fields/checkbox.vue";
import fieldDate from "./fields/date.vue";
import fieldTime from "./fields/time.vue";
import fieldNumber from "./fields/number.vue";
import fieldInput from "./fields/input.vue";
import fieldPartialDate from "./fields/partial-date.vue";
import fieldPartialTime from "./fields/partial-time.vue";
import fieldTextarea from "./fields/textarea.vue";
import fieldUpload from "./fields/upload.vue";

export default {
  props: {
    value: {
      type: [String, Array, Date, Number]
    },
    tableField: {
      type: Object
    },
    tableStatus: {
      type: Object
    },
    birthmark: {
      type: String
    },
    tableFieldList: {
      type: Array
    },
    embeddedTable: {
      type: Array
    }
  },
  components: {
    fieldSelect,
    fieldCheckbox,
    fieldDate,
    fieldTime,
    fieldNumber,
    fieldInput,
    fieldPartialDate,
    fieldPartialTime,
    fieldTextarea,
    fieldUpload,
    fieldRadio
  },
  data () {
    return {
      localValue: null
    };
  },

  watch: {
    value: {
      handler: function (val) {
        this.localValue = val;
      },
      deep: true,
      immediate: true
    },
    localValue: {
      handler: function (val) {
        this.$emit("input", val);
      },
      deep: true
    }
  },
};
</script>